<template>
	<view>
		
		<!-- 商品详情大图 -->
		<swiper-image :resdata="banners" height="750" preview></swiper-image>
		<!-- 基础详情 -->
		<base-info :detail="detail" :show-price="showPrice"></base-info>
		<!-- 滚动商品特性 w170*h110 -->
		<scroll-attrs :baseAttrs="baseAttrs"></scroll-attrs>
		<!-- 属性选择 -->
		<view class="p-2">
			<view class="rounded border bg-light-secondary">
				<list-item @click="show('attr')"
				v-if="detail.sku_type === 1">
					<view class="d-flex">
						<text class="mr-2 text-muted">已选</text>
						<text>{{checkedSkus}}</text>
					</view>
				</list-item>
				<list-item @click="goToCoupon">
					<view class="d-flex">
						<text class="mr-2 text-muted">优惠券</text>
						<text class="main-text-color">马上领取</text>
					</view>
				</list-item>
				<list-item @click="show('express')">
					<view class="d-flex">
						<text class="mr-2 text-muted">配送</text>
						<text class="mr-2">北京 东城区</text>
						<text class="main-text-color">现配</text>
					</view>
				</list-item>
				<list-item extraWidth="15%" @click="show('service')">
					<view class="d-flex a-center">
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							小米自营
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							小米发货
						</view>
						<view class="text-muted font d-flex a-center mr-2">
							<view class="iconfont icon-finish main-text-color"></view>
							七天无理由退货
						</view>
					</view>
				</list-item>
			</view>
		</view>
		<!-- 横向滚动评论 
			外层 w620*h380
			头像 w70*h70
			图片 h115
		-->
		<scroll-comments :goods_id="detail.id" :comments="comments"></scroll-comments>
		
		<!-- 商品详情 -->
		<view class="py-4">
			<u-parse className="uparse" :content="context" @preview="preview" @navigate="navigate" ></u-parse>
		</view>
		<!-- 热门推荐 -->
		<card headTitle="热门推荐" :headTitleWeight="false"
		:headBorderBottom="false">
			<view class="row j-sb">
				<common-list v-for="(item,index) in hotList"
				:key="index" :item="item" :index="index"
				type="redirectTo">
				</common-list>
			</view>
		</card>
		
		<!-- 底部操作条 -->
		<bottom-btn @show="show('attr')"></bottom-btn>
		
		
		<!-- 属性筛选框 -->
		<common-popup :popupClass="popup.attr" @hide="hide('attr')">
			<!-- 
			商品信息(275rpx)
			图片 180*180
			-->
			<view class="d-flex a-center" style="height: 275rpx;">
				<image src="../../static/images/demo/list/1.jpg" mode="widthFix"
				style="height: 180rpx;width: 180rpx;" class="border rounded"></image>
				<view class="pl-2">
					<price priceSize="font-lg" unitSize="font" :text="showPrice"></price>
					<text class="d-block">{{checkedSkus}}</text>
				</view>
			</view>
			<!-- 
			表单部分(660rpx)
			-->
			<scroll-view scroll-y class="w-100" style="height: 660rpx;">
				<card :headTitle="item.title" :headTitleWeight="false" 
				:headBorderBottom="false" :key="index"
				v-for="(item,index) in selects">
					<hc-radio-group :label="item" 
					:selected.sync='item.selected'></hc-radio-group>
				</card>
				<view class="d-flex j-sb a-center p-2 border-top border-light-secondary">
					<text>购买数量</text>
					<uni-number-box :min="1" :max="maxStock" :value="detail.num" @change="detail.num = $event"></uni-number-box>
				</view>
			</scroll-view>
			<!-- 
			 按钮(100rpx)
			 -->
			 <view class="text-white font-md d-flex a-center j-center" 
			 style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;" :class="maxStock === 0 ? 'bg-secondary' : 'main-bg-color'"
			 :hover-class="maxStock !== 0 ? 'main-bg-hover-color' : ''"
			 @tap.stop="addCart">
			 	{{maxStock===0?'暂无库存':'加入购物车'}}
			 </view>
		</common-popup>
		
		
		<!-- 收货地址 -->
		<common-popup :popupClass="popup.express" @hide="hide('express')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				收货地址
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
				<list-item v-for="(item,index) in pathList" :key="index">
					<view class="iconfont icon-dingwei font-weight font-md"
					>{{item.name}}</view>
					<view class="font text-light-muted">
						{{item.path}} {{item.detailPath}}
					</view>
				</list-item>
			</scroll-view>
			<!-- 
			 按钮(100rpx)
			 -->
			 <view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;" @tap.stop="openCreatePath">
			 	选择新的地址
			 </view>
		</common-popup>
		
		<!-- 服务说明 -->
		<common-popup :popupClass="popup.service" @hide="hide('service')">
			<view class="d-flex a-center j-center font-md border-bottom border-light-secondary" style="height: 100rpx;">
				服务说明
			</view>
			<scroll-view scroll-y class="w-100" style="height: 835rpx;">
				<view class="py-1">
					<view class="d-flex a-center">
						<view class="iconfont icon-finish main-text-color mr-1"></view>
						小米自营
					</view>
					<text class="text-light-muted font pl-4">
						不管满多少，就是不包邮
					</text>
				</view>
			</scroll-view>
			<!-- 
			 按钮(100rpx)
			 -->
			 <view class="main-bg-color text-white font-md d-flex a-center j-center" hover-class="main-bg-hover-color" style="height: 100rpx;margin-left: -30rpx;margin-right: -30rpx;" @tap.stop="hide('service')">
			 	确定
			 </view>
		</common-popup>
		
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex";
	import scrollAttrs from "@/components/detail/scroll-attrs.vue"
	import baseInfo from "@/components/detail/base-info.vue"
	import swiperImage from "@/components/index/swiper-image.vue";
	import listItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue";
	import scrollComments from "@/components/detail/scroll-comments.vue";
	import card from "@/components/common/card.vue";
	import commonList from "@/components/common/common-list.vue";
	import bottomBtn from "@/components/detail/bottom-btn.vue";
	import commonPopup from "@/components/common/common-popup.vue";
	import price from "@/components/common/price.vue";
	import hcRadioGroup from "@/components/common/radio-group.vue";
	import uParse from "@/components/uni-ui/uParse/src/wxParse.vue";
	import uniNumberBox from "@/components/uni-ui/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			swiperImage,
			baseInfo,
			scrollAttrs,
			listItem,
			scrollComments,
			card,
			commonList,
			bottomBtn,
			commonPopup,
			price,
			hcRadioGroup,
			uParse,
			uniNumberBox
		},
		data() {
			return {
				selects: [],
				popup: {
					attr: "none",
					express: "none",
					service: "none",
				},
				popupClass: "none",
				htmlNodes: `<img style='width:100%;' src="/static/images/demo/demo1.jpg" /><img style='width:100%;' src="/static/images/demo/demo2.jpg" /><img style='width:100%;' src="/static/images/demo/demo3.jpg" />
				    `,
				comments: [],
				context:"",
				banners: [],
				detail: {},
				baseAttrs: [],
				hotList: [{
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}, {
					cover: "/static/images/demo/list/1.jpg",
					title: "米家空调",
					desc: "1.5匹变频",
					oprice: 2699,
					pprice: 1399
				}]
			}
		},
		// 监听页面返回事件
		onBackPress() {
			// 关闭模态框
			for(let key in this.popup){
				if(this.popup[key] !== 'none'){
					this.hide(key)
					return true
				}
			}
		},
		computed:{
			...mapState({
				address:state=>state.address.list
			}),
			// 选中的sku
			checkedSkus(){
				// 拿到选中skus组成字符串
				let checkedSkus = this.selects.map(v=>{
					return v.list[v.selected].name
				})
				return checkedSkus.join(',')
			},
			// 选中skus的索引
			checkedSkusIndex(){
				if (!Array.isArray(this.detail.goodsSkus)) {
					return -1
				}
				let index = this.detail.goodsSkus.findIndex((item)=>{
					return item.skusText === this.checkedSkus
				})
				return index
			},
			// 显示价格
			showPrice(){
				if (this.checkedSkusIndex < 0) {
					return this.detail.min_price || 0.00
				}
				return this.detail.goodsSkus[this.checkedSkusIndex].pprice
			},
			// 最大库存
			maxStock(){
				if (this.detail.sku_type === 0) {
					return this.detail.stock
				}
				if (!Array.isArray(this.detail.goodsSkus)) {
					return 100
				}
				console.log(this.detail.goodsSkus[this.checkedSkusIndex].stock);
				return this.detail.goodsSkus[this.checkedSkusIndex].stock
			}
		},
		onLoad(e) {
			console.log(e);
			if (e) {
				this.__init(e.id)
			}
		},
		methods: {
			...mapMutations([
				'addGoodsToCart'
			]),
			// 初始化页面
			__init(id){
				this.$H.get('/goods/'+id).then(res=>{
					console.log(res);
					// 轮播图
					this.banners = res.goodsBanner.map(v=>{
						return {
							src:v.url
						}
					})
					console.log(this.banners)
					// 初始化基本信息
					this.detail = res
					this.detail.num = 1
					// 修改页面标题
					console.log(res.title);
					uni.setNavigationBarTitle({
						title:res.title
					})
					// 滚动商品属性
					this.baseAttrs = res.goodsAttrs.map(v=>{
						return { 
							icon:"icon-cpu",
							title:v.name,
							desc:v.value,
						}
					})
					// 热门评论
				   this.comments = res.hotComments.map(v=>{
					   var imglist = []
					   
					   for (let k in v.review.image) {
							imglist.push(v.review.image[k])
					   }
					   return {
						   id:v.id,
						   user_id:v.user.id,
						   userpic:v.user.avatar,
						   username:v.user.nickname,
						   create_time:v.review_time,
						   goods_num:v.goods_num,
						   context:v.review.data,
						   imglist:imglist
					   }
				   })
				   // 商品详情
				   this.context = res.content
				   console.log( this.comments)
				   // 热门推荐
				  this.hotList = this.hotList.map(v=>{
					  return {
						  id:v.id,
						  cover:v.cover,
						  title:v.title,
						  desc:v.desc,
						  oprice:v.min_oprice,
						  pprice:v.min_price
					  }
				  })
				  if (this.detail.sku_type === 1) {
				  	// 商品规格（选项部分）
				  	this.selects = res.goodsSkusCard.map(v=>{
					  let list = v.goodsSkusCardValue.map(v1=>{
						  return {
							  id:v1.id,
							  name:v1.value
						  }
					  })
					  console.log(list)
					  return {
						id:v.id,
						title:v.name,
						selected:0,
						list:list
					  }
				  	})
				  	// 商品规格（匹配价格）
				  	this.detail.goodsSkus.forEach(item=>{
					  let arr = []
					  for (let key in item.skus) {
						arr.push(item.skus[key].value)
					  }
					  item.skusText = arr.join(',')
				  	})
				  }
				})
			},
			addCart(){
				if(this.maxStock === 0){
					return;
				}
				
				this.$H.post('/cart',{
					shop_id:this.detail.sku_type === 0 ? this.detail.id : this.detail.goodsSkus[this.checkedSkusIndex].id,
					skus_type:this.detail.sku_type,
					num:this.detail.num
				},{
					token:true
				}).then(res=>{
					console.log(res);
					// 通知购物车页面更新数据
					uni.$emit('updateCart')
					// 隐藏筛选框
					this.hide('attr')
					// 成功提示
					uni.showToast({
						title: '加入成功'
					});
				})
				// 组织数据
				let goods = this.detail
				goods['checked'] = false
				goods['attrs'] = this.selects
				// 加入购物车
				this.addGoodsToCart(goods)
				// 隐藏筛选框
				this.hide('attr')
				// 成功提示
				uni.showToast({
					title: '加入成功'
				});
			},
			openCreateAddress(){
				uni.navigateTo({
					url: "/pages/user-address-edit/user-address-edit",
				});
			},
			goToCoupon(){
				this.navigateTo({
					url: '../coupon/coupon',
				});
			},
			hide(key) {
				this.popup[key] = 'hide';
				setTimeout(() => {
					this.popup[key] = 'none'
				}, 200);
			},
			show(key) {
				this.popup[key] = 'show'
			}
		}
	}
</script>

<style>
	._popup,
	._mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}

	._popup {
		z-index: 2000;
		display: none;
	}

	._mask {
		z-index: 2002;
		background: rgba(0, 0, 0, 0.5);
	}

	._popup ._body {
		position: fixed;
		bottom: -1035rpx;
		width: 92%;
		padding: 0 4%;
		height: 1035rpx;
		z-index: 2003;
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	._popup.show {
		display: block;
	}

	.show ._mask {
		animation: showPopupMask 0.2s linear both;
	}

	.show ._body {
		animation: showPopupBody 0.2s linear both;
	}

	._popup.hide {
		display: block;
	}

	.hide ._mask {
		animation: hidePopupMask 0.2s linear both;
	}

	.hide ._body {
		animation: hidePopupBody 0.2s linear both;
	}

	@keyframes showPopupBody {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hidePopupBody {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes showPopupMask {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopupMask {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	._popup.none {
		display: none;
	}
</style>